<template>
  <li class="todo-list" @mouseleave="flag=false" @mouseenter="flag = true">
    <label>
      <input type="checkbox" :checked="isChecked" @change="changeCheck(id)" />
      <span> {{title}} </span>
    </label>
    <button class="btn btn-danger" @click="removeList(id)" v-show="flag">删除</button>
  </li>
</template>

<script>
export default {
  name:"TodoItem",
  props:["id","title","isChecked","removeList","changeCheck"],
  data(){
    return{
      flag:false
    }
  },
};
</script>

<style>
</style>